<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: none;
            padding: nono;
        }
        .head{
            height: 80px;
            width: 800px;
            display: flex;
            box-sizing: border-box;
        }
        .input{
            height: 100%;
            width: 600px;
            box-sizing: border-box;
        }
        .button{
            height: 100%;
            width: 200px;
            line-height: 100%;
        }
        .count{
            height: 500px;
            width: 800px;
            display: flex;
        }
        .c1{
            height: 100%;
            width: 400px;
        }
        h3{
            text-align: center;
        }
        .creat{
            height: 50px;
            width: 400px;
            display: flex;
        }
        .creat span{
            height: 50px;
            font-size: 15px;
            width: 300px;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <div class="head">
        <input type="text" class="input"> <button class="button">新建任务</button>
    </div>
    <div class="count">
        <div class="c1">
            <h3>未完成</h3>
            <!-- <div class="creat">
                <input type="checkbox"> <span>吃饭</span> <button>删除</button>
            </div> -->
        </div>
        <div class="c2">
            <h3>已完成</h3>
        </div>
    </div>
    <script>
        let newCreate = document.querySelector('.button');
        newCreate.onclick = function(){
            let create = document.createElement('div');
            create.className = 'creat';
            let inputBox = document.createElement('input');
            inputBox.className = 'abc';
            inputBox.type = 'checkbox';
            let inputBq = document.querySelector('.head input');
            if(inputBq.value == ''){
                console.log('任务不能为空');
                return;
            }
            let spanNr = document.createElement('span');
            spanNr.innerHTML = inputBq.value;
            let deleteAn = document.createElement('button');
            deleteAn.innerHTML = '删除';
            create.appendChild(inputBox);
            create.appendChild(spanNr);
            create.appendChild(deleteAn);
            let parent = document.querySelector('.c1');
            parent.appendChild(create);
            inputBq.value = '';

            inputBox.onclick = function(){
                if(!inputBox.checked){
                    let wei = document.querySelector('.c1')
                    wei.appendChild(create);
                }else{
                    let done = document.querySelector('.c2')
                    done.appendChild(create);
                }
            }

            deleteAn.onclick = function(){
                let parent = create.parentNode;
                parent.removeChild(create);
            }
        }
    </script>
</body>
</html>